<template>
  <div id="CategorySelection">
    <div id="banner">
      <div class="header">
        <div class="header-map">
          <div class="index-logo">
            <i class="ld-coin"></i>
          </div>
          <div class="map-name">
            <div class="map-icon"></div>
            <span id="head-dress">定位中...</span>
          </div>
        </div>
        <div class="search">
          <a href="/Search.aspx">
            <i class="home-icon search-icon"></i>
            <span class="search-sp">搜索商品或品牌</span>
          </a>
        </div>
      </div>
      <div class="nav_box">
        <router-link to="/" class="nav_item">热门活动</router-link>
        <router-link class="nav_item on" to="">品类精选</router-link>
        <span
          id="nav_xiahuaxian"
          class="nav_xiahuaxian"
          style="left: 234px"
        ></span>
      </div>
      <div class="floor_box">
        <div class="floor onload" style="display: block">
          <div class="floor_m"></div>
          <div id="pageRecommend" class="category_s">
            <div class="cs_box">
              <div id="cs_nav" class="cs_nav">
                <ul>
                  <li v-for="(item,index) in getSelectionList" :key="index">
                      <a href="#" @click="getSelectionId(index)">
                        <img
                          :src="item.ItemImagePath"
                          onerror="this.src='Images/nofound.png'"
                        />
                        <p style="color: #000000">{{item.LabelContent}}</p>
                      </a>
                  </li>
                  <li>
                    <a href="#" @click="getSelectionId(0)">
                      <img
                        src="https://m.9bianli.com/Images/homePage/cs_all.png"
                      />
                      <p>全部</p>
                    </a>
                  </li>
                </ul>
              </div>
              <div id="cs_bottom">
                <div class="cs_list" v-for="(item,index) in getList" :key="index">
                  <div class="cs_top">
                    <img
                      :src="item.PublisherImage"
                      onerror="this.src='../Images/nofound.png'"
                      class="cs_logo"
                    />
                    <span class="cs_t1">{{item.PublisherName}}</span>
                  </div>
                  <div class="cs_title">
                    {{item.ArticleTitle}}
                  </div>
                  <div class="cs_product cs_product3">
                    <a class="getgallery" v-for="(ite,idx) in item.RecommendArticlesItem" :key="idx">
                      <img
                        :src="ite.Image"
                        class="cs_img_thum"
                        onerror="this.src='../Images/nofound.png'"
                      />
                    </a>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {getCateList,getSelection} from '../api/getgoods'
export default {
  data(){
    return{
      cateDataList:[],
      selectionList:[]
    }
  },
    created(){//获取精选页面数据
        getCateList().then(res=>{
            this.cateDataList= res.data.Data
        })
        //获取精选分类数据
        getSelection().then(res=>{
            // console.log(res.data.ChildSectionItems[2].MallSectionItemList)
            this.selectionList=res.data.ChildSectionItems[2].MallSectionItemList
        })
    },
    computed: {
      getList() {
        return this.cateDataList 
      },
      getSelectionList(){
        return this.selectionList
      }
    },
    methods: {
      getSelectionId(idx) {
        this.$store.commit('SelectionPage/changePageId',idx)
        this.$router.push('/page')
      }
    },
};
</script>

<style scoped src="../assets/css/CategorySelection.css" ></style>
<style lang="sass" scoped >
</style>